<!-- 客户评价页面 -->
<template>
	<view class="evaluation-container-box">
		<!-- 循环渲染评价数据列表 -->
		<block v-for="evaluationItem in dataList" :key="evaluationItem.id">
			<view class="evaluation-item">
				<!-- 评分区域 -->
				<view class="score-box"><u-rate :disabled="true" size="26" :current="evaluationItem.star" active-color="#FFB54B" gutter="17"></u-rate></view>
				<view class="score-box">
					<block v-for="(tag, i) in evaluationItem.tag_id" :key="i">
						<u-tag
							style="margin-right: 13rpx;"
							:text="tag"
							shape="square"
							size="mini"
							bg-color="#F4F4F6"
							border-color="#F4F4F6"
							color="#97979F"
							:closeable="false"
						/>
					</block>
				</view>
				<view class="score-box text">{{ evaluationItem.comment }}</view>
				<view class="score-box">
					<text style="margin-right: 2em;">{{ evaluationItem.create_time }}</text>
					<text>{{ evaluationItem.nick_name | setName }}</text>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sortData: {
				page: 1,
				page_size: 10,
			},
			// 数据列表
			dataList: [],
		};
	},
	onLoad() {
		this.getData()
	},
	async onPullDownRefresh() {
		this.sortData.page = 1
		this.dataList = []
		await this.getData()
		uni.stopPullDownRefresh()
		this.$u.toast('页面数据已刷新')
	},
	onReachBottom() {
		this.sortData.page += 1
		this.getData()
	},
	methods: {
		async getData() {
			const res = await this.$u.api.getMyCommentList(this.sortData)
			if(!res) return
			this.dataList = [...this.dataList, ...res]
			// console.log(this.dataList);
		}
	},
	filters: {
		// 处理评价用户的姓名除了姓其他显示 *
		setName(name) {
			return name.substr(0, 1) + new Array(name.length).join('*');
		}
	}
};
</script>

<style lang="scss" scoped>
.evaluation-container-box {
	background-color: #f0eff4;
	min-height: 100vh;
	padding-top: 20rpx;
	.evaluation-item {
		background-color: white;
		padding: 18rpx 24rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		.score-box {
			min-height: 55rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #97979f;
		}
		.text {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #141418;
		}
	}
}
</style>
